<template>
  <div>
    <!-- gutter 属性来指定每一栏之间的间隔，默认间隔为 0   -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="devm">
          <el-header style="background-color: #FFFAFA;text-align: center;height: 35px;">设备状态统计</el-header>
          <div ref="devm_info" style="width: 400px;height: 500px;background-color: #fff"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content" style="background-color: #f9f4dc">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="alarm_critical">{{ CriticalNum }} 关键告警</div>
            </el-col>
            <el-col :span="6">
              <div class="alarm_major">{{ MajorNum }} 主要告警</div>
            </el-col>
            <el-col :span="6">
              <div class="alarm_minor">{{ MinorNum }} 次要告警</div>
            </el-col>
            <el-col :span="6">
              <div class="alarm_warning">{{ WarningNum }} 普通告警</div>
            </el-col>
          </el-row>
        </div>
        <div>
          <Map/>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="devm_info">
          <el-header style="background-color: #FFFAFA;text-align: center;">设备详情统计表</el-header>
          <div ref="alarm" style="background-color: #ffffff">
            <el-table
                ref="multipleTable"
                :data="nodeList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
              <el-table-column
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column
                  prop="node-id"
                  label="名称"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="netconf-node-topology:host"
                  label="IP"
                  width="140">
              </el-table-column>
              <el-table-column
                  prop="type"
                  label="设备类型"
                  width="100">
              </el-table-column>

            </el-table>
            <div style="text-align: center;margin-top: 3px;">
              <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  @current-change="current_change">
              </el-pagination>
            </div>

          </div>
          <div style="background-color: #ffffff">
            <br>
            <el-header style="background-color: #fffafa;text-align: center;font-family: 黑体">一键处理中心</el-header>
            <div class="handle_center">
              <el-switch
                  v-model="subscriber"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="订阅消息"
                  inactive-text="取消订阅">
              </el-switch>
              <el-switch
                  style="display: block;margin-top: 10px;align: center"
                  v-model="receiver"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="接收通知"
                  inactive-text="拒收通知">
              </el-switch>
              <el-switch
                  style="display: block;margin-top: 10px;"
                  v-model="alerter"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="接收告警"
                  inactive-text="关闭告警">
              </el-switch>

            </div>

          </div>
        </div>

      </el-col>
    </el-row>


    <div class="alarm_info">
      <br>

      <el-header style="text-align: left;height: 35px;font-family: 华文行楷;padding-left: 3px;">
        最近告警详情信息
        <el-button type="danger" size="mini" plain @click="getAlarm" style="background-color: #FFAAAA;">刷新</el-button>
      </el-header>
      <el-table
          :data="alarmTableData.alarms.alarms.alarm"
          stripe
          height="300"
          style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="告警名称">
                <span>{{ props.row['object-name'] }}</span>
              </el-form-item>
              <el-form-item label="告警原因">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="告警代码">
                <span>{{ props.row['alarm-code'] }}</span>
              </el-form-item>
              <el-form-item label="告警状态">
                <span>{{ props.row['alarm-state'] }}</span>
              </el-form-item>
              <el-form-item label="开始时间">
                <span>{{ props.row['start-time'] }}</span>
              </el-form-item>
              <el-form-item label="结束时间">
                <span>{{ props.row['end-time'] }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            prop="ack"
            label="确认位">
        </el-table-column>
        <el-table-column
            prop="perceived-severity"
            label="级别">
        </el-table-column>
        <el-table-column
            prop="device"
            label="设备">
        </el-table-column>
        <el-table-column
            prop="object-name"
            label="告警来源">
        </el-table-column>
        <el-table-column
            prop="object-type"
            label="类型">
        </el-table-column>
        <el-table-column
            prop="alarm-code"
            label="告警代码">
        </el-table-column>
        <el-table-column
            prop="alarm-state"
            label="告警状态">
        </el-table-column>
        <el-table-column
            prop="start-time"
            label="开始时间">
        </el-table-column>
        <el-table-column
            prop="end-time"
            label="结束时间">
        </el-table-column>
        <el-table-column
            prop="address"
            label="确认用户">
        </el-table-column>
        <el-table-column
            prop="address"
            label="告警原因">
        </el-table-column>
        <el-table-column
            prop="address"
            label="详细信息">
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">确认
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">忽略
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
import axios from "axios";
import *as echarts from 'echarts';
import Map from "@/components/test/Map";

export default {
  name: "Overview",
  components: {
    Map
  },
  data() {
    return {
      multipleSelection: [],
      //统计相关
      total: 0,
      pagesize: 10,
      currentPage: 1,
      nodeList: [{
        'node-id': 'otna',
        'netconf-node-topology:connection-status': '',
        'netconf-node-topology:port': '',
        'netconf-node-topology:host': '192.168.1.1',
        type: 'OTN-A',
      }],
      subscriber: '',
      receiver: '',
      alerter: '',
      //告警相关
      alarmTotal: '',
      CriticalNum: 0,
      MajorNum: 0,
      MinorNum: 0,
      WarningNum: 0,
      alarmTableData: {
        alarms: {
          alarms: {
            alarm:
                [{
                  "device": '',
                  ack: '',
                  "alarm-serial-no": 22,
                  "object-name": "PTP=/shelf=1/slot=1/subslot=1/port=9",
                  "object-type": "PTP",
                  "alarm-code": "ODUK_PM_SSF",
                  "perceived-severity": "major",
                  "start-time": "2022-06-05T04:57:51.286Z",
                  "end-time": "2022-06-05T04:57:52.450Z",
                  "alarm-state": "end",
                }]
          }
        }
      }

    }
  },
  mounted() {
    this.drawLine();
    this.getAlarm();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let devm = echarts.init(this.$refs.devm_info);
      // 绘制图表
      devm.setOption({
        title: {
          //设置图标的标题
          // text: '首次手写ECharts',
          link: "http://127.0.0.1:555",
          target: 'self',
          // backgroundColor: "red",
          borderColor: "pink",
          x: "center",
          // subtext: '副标题'

        },
        //提示框组件
        tooltip: {
          show: true,//是否显示
          //触发类型
          trigger: "axis",//触发类型 item图形触发：散点图、饼图等无类目轴的图表中使用 axis坐标轴触发 none什么都不触发
          //坐标轴指示器
          axisPointer: {
            type: "cross"//line 显示一个实线，shadow阴影 cross十字准星
          },
          // showContent:false,
          backgroundColor: "yellow",
          borderColor: "red",
          borderWidth: 5,
          textStyle: {
            color: "blue"
          },
          //自定义的提示框信息
          formatter(params) {
            console.log(params);
            // eslint-disable-next-line for-direction
            for (var i = 0; i > params.length; i++) {
              return "名字：" + params[i].name + "数量：" + params[i].data.value;
            }
          }

        },
        xAxis: {
          //x轴的提示文本
          data: ['离线设备', '在线设备']
        },
        yAxis: {
          // data:[10,20,30]
        },
        series: {
          name: 'Pets',
          type: 'bar',//设置图表的类型为柱状图，还有line、pie
          barWidth: 30,//设置柱状图的柱子宽度
          color: "red",//设置柱状图的颜色
          //单独设置每个轴的颜色
          itemStyle: {
            normal: {
              color: function (params) {
                let colorList = [
                  "red",
                  "lightgreen"
                ]
                return colorList[params.dataIndex]
              }
            }
          },
          data: [
            {value: 2, "name": "outline"},
            {value: 4, "name": "online"},
          ],
          //最大值/最小值
          markPoint: {
            data: [
              {
                type: "max",
                name: "最大值"
              },
              {
                type: "min",
                name: "最小值"
              }
            ]
          },
          //图表的标线
          markLine: {
            data: [
              {
                type: "average",
                name: "平均值"
              }
            ]
          }
        }
      })
    },
    //获取节点列表信息
    getNodeList() {
      axios.get('/list/nodes').then(
          response => {
            console.log("请求成功", response.data);
            this.nodeList = response.data;


          },
          error => {
            console.log("失败！", error.message)
            // this.$message.error(error.message);
          }
      )
    },
    getAlarm() {
      this.getNodeList();
      console.log("长度是： ", this.nodeList.length)
      console.log(this.nodeList[0]['node-id'])
      let m_flag = -1;
      for (let i = 0; i < this.nodeList.length; i++) {
          console.log("处于连接状态的节点： ",this.nodeList[i]['node-id'])
          axios.get('/node/' + this.nodeList[i]['node-id'] + '/alarms&tcas').then(
              response => {
                this.alarmTotal++;
                m_flag = 1;
                console.log("告警信息", response.data);
                this.alarmTableData = response.data;

                for (let j = 0; j < this.alarmTableData.alarms.alarms.alarm.length; j++) {

                  this.alarmTableData.alarms.alarms.alarm[j].device = this.nodeList[i]['node-id'];
                }

                // this.$message.success("设备列表信息更新成功");
              },
              error => {
                m_flag = 0;
                console.log("失败！！", error.message)
                // this.$message.error(error.message);
              }
          )
        }

      if (m_flag) {
        // this.alarmTotal = this.alarmTableData.alarms.alarms.alarm.length;
        this.$message.success("告警信息更新成功");

        this.analyzeAlarmLevel();

        console.log("2345678")

      } else {
        this.$message.error("更新失败");
      }
    },

    analyzeAlarmLevel() {
      setTimeout(() => {
        console.log('total: ',this.alarmTotal);
        for (let i = 0; i++; i < this.alarmTotal) {
          switch (this.alarmTableData.alarms.alarms.alarm[i]["perceived-severity"]) {
            case 'critical':
              this.CriticalNum++;
              break;
            case 'major':
              this.MajorNum++;
              break;
            case 'minor':
              this.MinorNum++;
              break;
            case 'warning':
              this.WarningNum++;
              break;

          }
        }
        console.log("主要告警数量： ", this.MajorNum);
        // alert("主要告警数量： "+this.MajorNum);
        console.log("次要告警数量： ", this.MinorNum)

      }, 1000);


    },


    current_change: function (currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSelectionChange() {

    }

  },
  computed: {
    criticalLevel() {
      //   for (let i = 0; i++; i < this.alarmTotal) {
      //     if (this.alarmTableData.alarms.alarms.alarm[i]["perceived-severity"] === 'critical') {
      //       this.CriticalNum++;
      //     }
      //   }

    }
  },

}
</script>

<style scoped>
.devm {
  float: left;
}

.alarm {
  float: left;
}

.alarm_info {
  text-align: left;
  width: 100%;
  height: 330px;
  float: left;
}

.handle_center {
  child-align: middle;
  margin-left: 140px;
}

.el-table--enable-row-hover .el-table__body :hover {

  background-color: #ffffff;

}

#devm {
  width: 400px;
  height: 600px;
  background-color: antiquewhite;

}

.alarm_critical{
  color: #d22020;
  font-weight: 600;
}
.alarm_major{
  color: red;
  font-weight: 600;
}
.alarm_minor{
  color: #fa5407;
}
.alarm_warning{
  color: #0038f5;
  font-weight: 600;
}


/*告警表格的样式*/
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>